<template>
    <el-dialog
        title="上传文件"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        @close="close"
        v-loading="isUploading"
        element-loading-text="上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.6)"
        :show-close="true" width="500px">
      <el-form ref="uploadForm">
        <el-row :gutter="10">
          <el-form-item>
            <el-upload class="upload-tuike"
                       ref="upload"
                       multiple
                       drag
                       :show-file-list="true"
                       :data="dataObj"
                       :action="uploadApiAddress"
                       :limit="fileLimit"
                       :on-success="uploadSuccess"
                       :on-error="uploadError"
                       :on-exceed="handleExceed"
                       :before-upload="beforeUpload"
                       :on-change="handleFileChange"
                       :on-remove="handleRemove"
                       :multiple="true"
                       :auto-upload="false">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传,当前目录只允许上传{{this.fileLimit}}个文件</em></div>
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="end">
          <el-col :span="5">
            <el-button icon="el-icon-upload2" type="success" @click="submit">提交</el-button>
          </el-col>
          <el-col :span="5">
              <el-button @click="close">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
</template>
<script>

import draggable from 'vuedraggable';
export default {
    name: 'addFolder',
    components: {
      draggable
    },
    props:{
      fileLimit: {
        type: Number,
        default: 10,
      },
      currentLocationId:{
        type:Number,
        default: 0,
      }
    } , //当前所处文件夹id
    data() {
        return {
            fileList: [],  // 用于显示文件列表
            uploadList: [], // 上传成功列表
            totalCount:0,
            uploadsuccess:0,
            //上传的信息
            dataObj: {
                parentId: 0, // 0 代表跟目录
                fileName: '',
                fileSize: 0,

            },
            uploadApiAddress : process.env.VUE_APP_BASE_API+"/video-distribute/files/addBatch",
            dialogVisible: false,
            isUploading:false,
            subPicture:true,
            dialogImageUrl: '',
            nextdialog: false,
            disabled: false
        }
    },
    methods: {
        open() {
            this.dialogVisible = true
        },
        close() {
            this.$refs.upload.clearFiles(); // 清空上传文件列表
            this.dialogVisible = false
            this.$parent.refreshGetList();
        },
        //文件改变调用
        handleExceed() {
            this.$message.error('当前目录只能上传一个文件!');
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
          this.totalCount = fileList.length
        },
        //上传成功
        uploadSuccess(response, file, fileList) {
          console.log(response.data)
          if (response.code === 200) {
            this.uploadsuccess +=1;
            if(this.totalCount === this.uploadsuccess){
               this.uploadList = [];
               this.totalCount = 0;
               this.dialogVisible = false;
               this.$parent.refreshGetList();
            }
          } else {
            this.$message.error("上传失败");
          }
          this.isUploading = false;
        },
        //上传失败
        uploadError(res) {
            this.$message.error('服务器异常请重试!');
        },
        //上传文件
        submit() {
            this.dataObj.parentId = this.$parent.currentLocationId
            this.isUploading = true;
            this.$refs.upload.submit();
        },
        // 资源上传前
        beforeUpload(files) {
            if(files==null || files==undefined){
              $.message.warning("请选择文件");
              return;
            }
            this.dataObj.fileName = files.name;
            this.dataObj.fileSize = files.size;
            const isVideo = files.type === 'video/mp4' || files.type === 'video/quicktime';
            if (!isVideo) {
              this.$message.error('请上传 mp4/mov 格式的视频!');
              return;
            }
        },
       handleFileChange(file, fileList) {
          if (this.$parent.fileAndFolderList != null && this.$parent.fileAndFolderList.length > 0) {
            //过滤掉文件夹
            const serverFileList =  this.$parent.fileAndFolderList.filter(item =>{
              return item.type !== "0"
             })

            const updateFileSet = new Set(fileList.map(item => item.name));
            const result = serverFileList.filter(item =>{return updateFileSet.has(item.fileName)})


            if(result.length >0 ){
              this.$message.error("文件已存在。");
              this.$refs.upload.clearFiles()
              return
            }
          }
          this.fileList = fileList;
          this.totalCount = fileList.length

      },


    }
}
</script>
<style lang="scss">
.el-dialog__body{
  padding-top: 14px;
  padding-bottom: 14px;
}
.el-form-item{
  margin-bottom: 20px;
}
.upload-tuike{
  .el-upload-dragger{
    width: 400px;
    margin-left: 30px;
  }
}
</style>
